<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.agreementManage') }}
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              return $pandaApi.apiGetAgreementList(params);
            }"
          >
            <template #table-column="tableSlotData">
              <el-table-column
                prop="name"
                :label="$t('markdowns.classify')">
                <template #default="props">
                  {{ $t(`agreement.${props.row.name}`) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="action"
                width="200"
                :label="$t('common.action')">
                <template #default="props">
                  <link-button :content="$t('common.edit')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="edit(props.row)"></link-button>
                  <link-button :content="$t('markdowns.detail')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="detail(props.row)"></link-button>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 详情 -->
              <detail-article ref="detailArticle"></detail-article>
              <!-- 编辑 -->
              <edit-article ref="editArticle" :patch-method="(id, data) => $pandaApi.apiPatchAgreementList(id, data).then(() => {
                $message.success($t('markdowns.editSuccess'))
                tableSlotData.table.deleteRefresh();
              }).catch(()=>{
                $message.warning($t('markdowns.editFail'))
                tableSlotData.table.deleteRefresh();
              })"></edit-article>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '@/components/Basic/Table/BasicTable.vue'
import { AuthModule } from '@/store/modules/auth';
import LinkButton from '@/components/Basic/Button/LinkButton.vue';
import editArticle from './editArticle.vue';
import detailArticle from './detailArticle.vue';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    editArticle,

    detailArticle
  },
  computed: {
    AuthModule: () => AuthModule
  },
  data() {
    return {
      tableData:[],
      authrole: AuthModule.authrole
    }
  },
  mounted() {
  },
  methods: {
    detail(row: any) {
      (this as any).$refs['detailArticle'].init(row)
    },
    edit(row: any) {
      (this as any).$refs['editArticle'].init(row)
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
